<script setup>
  import { useTodoStore } from '@/stores/todo'
  import { ref } from 'vue';
  const todoStore = useTodoStore()

  // 输入框的值
  const text = ref('')

  // 使用 v-model
  // const addTodo = () => {
  //   // 判断是否为空
  //   if (!text.value) {
  //     return alert('数据不能为空')
  //   }
  //   // 调用 todoStore 里面的添加函数
  //   todoStore.addTodo(text.value)
  //   // 清空
  //   text.value = ''
  // }

  // 不用 v-model 那就传入 e
  const addTodo = (e) => {
    const text = e.target.value.trim()
    // 判断是否为空
    if (!text) {
      return alert('数据不能为空')
    }
    // 调用 todoStore 里面的添加函数
    todoStore.addTodo(text)
    // 清空
    e.target.value = ''
  }
</script>
<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 用 v-model -->
    <!-- <input
      class="new-todo"
      placeholder="What needs to be finished?"
      autofocus
      v-model.trim.lazy="text"
      @keydown.enter="addTodo"
    /> -->
    <!-- 不用 v-model -->
    <input
      class="new-todo"
      placeholder="What needs to be finished?"
      autofocus
      @keydown.enter="addTodo"
    />
  </header>
</template>